<template>
  <el-table
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    v-if="schedules && schedules.length > 0"
    class="table"
    height="400"
    :data="schedules"
    @row-contextmenu="onClickCell"
  >
    <el-table-column align="center" label="日期" width="100">
      <el-table-column align="center" prop="name" width="100">
      </el-table-column>
    </el-table-column>
    <el-table-column>
      <template slot="header">
        <div class="date-header">
          <div class="date" v-for="item in dates" :key="item">{{ item }}</div>
        </div>
      </template>

      <el-table-column
        align="center"
        class-name="column"
        prop="monday"
        label="周一"
        width="130"
      >
        <template slot-scope="scope">
          <div class="duty-list" v-if="!scope.row.monday.adding">
            <div v-for="item in scope.row.monday" :key="item.time">
              <el-tooltip placement="right-start" effect="light">
                <div slot="content" v-html="item.detail"></div>
                <p
                  class="duty"
                  @click="handleEditDuty(scope, 'monday', item.time)"
                >
                  {{ item.point }}
                </p>
              </el-tooltip>
            </div>
          </div>
          <el-button
            v-else
            type="primary"
            @click="onClickCreate(scope, 'monday')"
            >新建</el-button
          >
        </template>
      </el-table-column>

      <el-table-column align="center" prop="tuesday" label="周二" width="130">
        <template slot-scope="scope">
          <div class="duty-list" v-if="!scope.row.tuesday.adding">
            <div v-for="item in scope.row.tuesday" :key="item.time">
              <el-tooltip placement="right-start" effect="light">
                <div slot="content" v-html="item.detail"></div>
                <p
                  class="duty"
                  @click="handleEditDuty(scope, 'tuesday', item.time)"
                >
                  {{ item.point }}
                </p>
              </el-tooltip>
            </div>
          </div>
          <el-button
            v-else
            type="primary"
            @click="onClickCreate(scope, 'tuesday')"
            >新建</el-button
          >
        </template>
      </el-table-column>

      <el-table-column align="center" prop="wednesday" label="周三" width="130">
        <template slot-scope="scope">
          <div class="duty-list" v-if="!scope.row.wednesday.adding">
            <div v-for="item in scope.row.wednesday" :key="item.time">
              <el-tooltip placement="right-start" effect="light">
                <div slot="content" v-html="item.detail"></div>
                <p
                  class="duty"
                  @click="handleEditDuty(scope, 'wednesday', item.time)"
                >
                  {{ item.point }}
                </p>
              </el-tooltip>
            </div>
          </div>
          <el-button
            v-else
            type="primary"
            @click="onClickCreate(scope, 'wednesday')"
            >新建</el-button
          >
        </template>
      </el-table-column>

      <el-table-column align="center" prop="thursday" label="周四" width="130">
        <template slot-scope="scope">
          <div class="duty-list" v-if="!scope.row.thursday.adding">
            <div v-for="item in scope.row.thursday" :key="item.time">
              <el-tooltip placement="right-start" effect="light">
                <div slot="content" v-html="item.detail"></div>
                <p
                  class="duty"
                  @click="handleEditDuty(scope, 'thursday', item.time)"
                >
                  {{ item.point }}
                </p>
              </el-tooltip>
            </div>
          </div>
          <el-button
            v-else
            type="primary"
            @click="onClickCreate(scope, 'thursday')"
            >新建</el-button
          >
        </template>
      </el-table-column>

      <el-table-column align="center" prop="friday" label="周五" width="130">
        <template slot-scope="scope">
          <div class="duty-list" v-if="!scope.row.friday.adding">
            <div v-for="item in scope.row.friday" :key="item.time">
              <el-tooltip placement="right-start" effect="light">
                <div slot="content" v-html="item.detail"></div>
                <p
                  class="duty"
                  @click="handleEditDuty(scope, 'friday', item.time)"
                >
                  {{ item.point }}
                </p>
              </el-tooltip>
            </div>
          </div>
          <el-button
            v-else
            type="primary"
            @click="onClickCreate(scope, 'friday')"
            >新建</el-button
          >
        </template>
      </el-table-column>

      <el-table-column align="center" prop="saturday" label="周六" width="130">
        <template slot-scope="scope">
          <div class="duty-list" v-if="!scope.row.saturday.adding">
            <div v-for="item in scope.row.saturday" :key="item.time">
              <el-tooltip placement="right-start" effect="light">
                <div slot="content" v-html="item.detail"></div>
                <p
                  class="duty"
                  @click="handleEditDuty(scope, 'saturday', item.time)"
                >
                  {{ item.point }}
                </p>
              </el-tooltip>
            </div>
          </div>
          <el-button
            v-else
            type="primary"
            @click="onClickCreate(scope, 'saturday')"
            >新建</el-button
          >
        </template>
      </el-table-column>

      <el-table-column align="center" prop="sunday" label="周天" width="130">
        <template slot-scope="scope">
          <div class="duty-list" v-if="!scope.row.sunday.adding">
            <div v-for="item in scope.row.sunday" :key="item.time">
              <el-tooltip placement="right-start" effect="light">
                <div slot="content" v-html="item.detail"></div>
                <p
                  class="duty"
                  @click="handleEditDuty(scope, 'sunday', item.time)"
                >
                  {{ item.point }}
                </p>
              </el-tooltip>
            </div>
          </div>
          <el-button
            v-else
            type="primary"
            @click="onClickCreate(scope, 'sunday')"
            >新建</el-button
          >
        </template>
      </el-table-column>
    </el-table-column>
  </el-table>
</template>

<script>
import props from './props';
import data from './data';
import lifecircle from './lifecircle';
import methods from './methods';
export default {
  name: 'Schedule',
  components: {},
  props,
  data,
  ...lifecircle,
  methods
};
</script>

<style lang="less" scoped>
.date-header {
  width: 100%;
  height: 100%;
  display: flex;

  .date {
    height: 100%;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.duty-list {
  width: 100%;
  height: 100px;
  overflow-x: hidden;
  overflow-y: scroll;
  .duty {
    margin: 0;
    padding: 3px 2px;
    width: 100%;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 12px;
    color: black;
    background-color: #fbd90d;
    box-shadow: 0 1px 5px #888888;

    cursor: pointer;
  }
}
</style>
